<template>
	<div>
		<el-form :inline="true" :model="queryForm" size="small" ref="queryForm" class="demo-form-inline">
			<el-form-item label="活动名称" prop="activityName">
				<el-input v-model="queryForm.activityName" placeholder="活动名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="doQuery()" size="mini">搜索</el-button>
				<el-button type="info" @click="resetQueryForm()" size="mini">重置</el-button>
			</el-form-item>
		</el-form>

		<el-button type="warning" @click="handleAddActivity()" size="mini">新增促销活动</el-button>

		<div>
			<el-table ref="queryForm" :data="tableData" row-key="activityId">
				<el-table-column prop="activityName" label="活动名称"></el-table-column>
				<el-table-column prop="activityBeginTime" label="开始时间"></el-table-column>
				<el-table-column prop="activityEndTime" label="结束时间"></el-table-column>
				<el-table-column prop="activityType" label="类型"></el-table-column>
				<el-table-column label="操作" align="center" min-width="160">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleSelect(scope.row)">查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 活动新增对话框 -->
		<el-dialog :title="activitiDialogTitle" :visible.sync="activityDialogVisible" width="35%" append-to-body>
			<el-form size="small" ref="dataForm" :model="dataForm" label-width="80px">
				<el-form-item label="活动名称" prop="activityName" :label-width="'140px'">
					<el-input v-model="dataForm.activityName" placeholder="请输入活动名称" maxlength="11" />
				</el-form-item>
				<el-form-item label="开始时间" :label-width="'140px'">
					<el-date-picker v-model="dataForm.activityBeginTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" style="width:100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" :label-width="'140px'">
					<el-date-picker v-model="dataForm.activityEndTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" style="width:100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="类型:" prop="activityType" :label-width="'140px'">
					<el-select v-model="dataForm.activityType" placeholder="请选择">
						<el-option label="每日限量" value="每日限量"></el-option>
						<el-option label="连续促销" value="连续促销"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动原因:" prop="activityReason" :label-width="'140px'">
					<el-input v-model="dataForm.activityReason" placeholder="请输入活动原因" />
				</el-form-item>
				<el-form-item label="备注:" prop="remark" :label-width="'140px'">
					<el-input v-model="dataForm.remark" placeholder="请输入备注信息" type="textarea" />
				</el-form-item>
				<el-form-item label="活动策划文件:" prop="brandDescribe" :label-width="'140px'">
					<a @click="showOssFile" href="#">查看策划文件</a>
				</el-form-item>
				<el-form-item label="活动商品列表:" prop="brandDescribe" :label-width="'140px'">
					<a @click="showActivitiGoods" href="#">设置活动商品</a>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button type="primary" @click="submitDataForm()">保 存</el-button>
				<el-button @click="addActivityVisible = false">返 回</el-button>
			</div>
		</el-dialog>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="queryForm.totalNum">
		</el-pagination>
		
		<!-- 活动策划文件-->
		<el-dialog title="策划文件列表" :visible.sync="planFileDialogVisible" append-to-body>
			<Fm :fileids="dataForm.ossId"  @transfer="getOssIds"></Fm>
		</el-dialog>
		
		<el-dialog title="活动商品列表" :visible.sync="activitiGoodsDialogVisible" width="1300px" append-to-body>
			<el-button @click="showAllGoodsDialog">选择商品</el-button>
			<el-table :data="dataForm.aglist" row-key="activityId">
				<el-table-column prop="goods.gname" label="名称"></el-table-column>
				<el-table-column prop="goods.gcode" label="编码"></el-table-column>
				<el-table-column prop="goods.marketPrice" label="市场价"></el-table-column>
				<el-table-column prop="goods.shopPrice" label="商城价"></el-table-column>
				<el-table-column prop="promotionAmount" label="促销数量">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.promotionAmount" placeholder="活动名称"  style="width:100px"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="priceType" label="调价方式" width="330px">
					<template slot-scope="scope">
						<el-radio v-model="scope.row.priceType" label="绝对值">绝对值</el-radio>
						<el-radio v-model="scope.row.priceType" label="百分比">百分比</el-radio>
						<span v-show="scope.row.priceType=='百分比'">
							<el-input size="mini" v-model="scope.row.percentage"  style="width:50px" placeholder="比例"></el-input>%
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="aprice1" label="市场活动价">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.aprice1" placeholder="市场价"  style="width:100px"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="aprice2" label="商城活动价">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.aprice2" placeholder="商城价"  style="width:100px"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		
		<el-dialog title="全部商品列表" :visible.sync="agDialogVisible" append-to-body>
			<el-form :inline="true" :model="queryGoodsForm" size="small" ref="queryForm" class="demo-form-inline">
				<el-form-item label="商品名称" prop="gname">
					<el-input v-model="queryGoodsForm.gname" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="商品编码" prop="gcode">
					<el-input v-model="queryGoodsForm.gcode" placeholder="商品编码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="doQueryGoods()" size="mini">搜索</el-button>
					<el-button type="info" @click="resetQueryGoodsForm()" size="mini">重置</el-button>
					<el-button type="info" @click="setActivitiGoods" size="mini">确定</el-button>
				</el-form-item>
			</el-form>
			
			<el-table ref="goodsTableData" :data="goodsTableData" row-key="id" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="gname" label="名称"></el-table-column>
				<el-table-column prop="gcode" label="编码"></el-table-column>
				<el-table-column prop="marketPrice" label="市场价"></el-table-column>
				<el-table-column prop="shopPrice" label="商城价"></el-table-column>
				<el-table-column prop="stock" label="库存"></el-table-column>
			</el-table>
			
			<el-pagination @size-change="handleGoodsTableSizeChange" @current-change="handleGoodsTableCurrentChange"
				:current-page="queryGoodsForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryGoodsForm.pageSize"
				layout="->, total, sizes, prev, pager, next, jumper" :total="queryGoodsForm.totalNum">
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
	import Fm from "@/components/file/fm.vue";
	export default {
		components: { Fm },
		data() {
			return {
				tableData: [],
				activitiGoodsTableData:[],
				goodsTableData:[],
				// 查询数据
				queryForm: {
					activityName: '',
					pageNum: 1,
					pageSize: 10,
					totalNum: 0,
				},
				queryGoodsForm:{
					activitiId:'',
					gname:'',
					gcode:'',
					pageNum: 1,
					pageSize: 10,
					totalNum: 0,
				},
				activitiDialogTitle: '',
				activityDialogVisible: false,
				planFileDialogVisible:false,
				activitiGoodsDialogVisible:false,
				agDialogVisible:false,
				dataForm: {
					id: '',
					activityName: '',
					activityBeginTime: '',
					activityEndTime: '',
					activityType: '',
					activityReason: '',
					remark: '',
					ossId: '',
					aglist: []
				},
				selectGoods:[],
			};
		},
		methods: {
			handleSelect(row){
				this.activitiDialogTitle="查看";
				this.activityDialogVisible=true;
				this.resetDataForm();
				axios.get("/activity/info/"+row.id).then(resp=>{
					this.dataForm=resp.data;
				})
			},
			submitDataForm(){
				axios.post("/activity",this.dataForm).then(resp=>{
					if(resp.code==20000){
						this.suc("添加成功");
						this.list();
					}else{
						this.error("失败");
					}
				})
			},
			setActivitiGoods(){
				let gl = [];
				this.selectGoods.forEach((d,i)=>{
					let g = {"activityId":"","promotionAmount":0,"priceType":"绝对值","percentage":0.0,"aprice1":0.0,"aprice2":0.0};
					g['goods']={"id":d.id,"gname":d.gname,"gcode":d.gcode,"marketPrice":d.marketPrice,"shopPrice":d.shopPrice};
					gl.push(g);
				});
				this.dataForm.aglist.push(...gl);
				this.agDialogVisible=false;
			},
			showOssFile(){
				this.planFileDialogVisible=true;
			},
			list() {
				axios.get("/activity", {
					params: this.queryForm
				}).then(resp => {
					this.tableData = resp.list;
					this.queryForm.pageNum = resp.pageNum;
					this.queryForm.pageSize = resp.pageSize;
					this.queryForm.totalNum = resp.total;
				})
			},
			listActivitGoods(){
				axios.get("/activiti/goods/"+this.dataForm.id).then(resp=>{
					this.activitiGoodsTableData=resp.data;
				})
			},
			listGoods() {
				axios.get("/goods/select", {
					params: this.queryGoodsForm
				}).then(resp => {
					this.goodsTableData = resp.list;
					this.queryGoodsForm.pageNum = resp.pageNum;
					this.queryGoodsForm.pageSize = resp.pageSize;
					this.queryGoodsForm.totalNum = resp.total;
				})
			},
			doQuery() {
				this.list();
			},
			doQueryActivitiGoods(){
				this.listActivitGoods();
			},
			doQueryGoods(){
				this.listGoods();
			},
			resetQueryForm() {
				this.queryForm = {
					activityName: '',
					pageNum: 1,
					pageSize: 10,
					totalNum: 0,
				};
				this.list();
			},
			resetQueryGoodsForm(){
				this.queryGoodsForm = {
					gname:'',
					gcode:'',
					pageNum: 1,
					pageSize: 10,
					totalNum: 0,
				};
				this.listGoods();
			},
			resetDataForm() {
				this.dataForm = {
					id: '',
					activityName: '',
					activityBeginTime: '',
					activityEndTime: '',
					activityType: '',
					activityReason: '',
					remark: '',
					ossId: '',
					aglist: []
				};
			},
			handleAddActivity() {
				this.activitiDialogTitle = "新增促销活动申请";
				this.activityDialogVisible = true;
				this.resetDataForm();
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.list();
			},
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.list();
			},
			handleGoodsTableCurrentChange(val) {
				this.queryGoodsForm.pageNum = val;
				this.listGoods();
			},
			handleGoodsTableSizeChange(val) {
				this.queryGoodsForm.pageSize = val;
				this.listGoods();
			},
			getOssIds(data){
				this.dataForm.ossId=data;
			},
			handleSelectionChange(l){
				this.selectGoods=l;
			},
			showAllGoodsDialog(){
				this.agDialogVisible=true;
			},
			showActivitiGoods(){
	
				this.activitiGoodsDialogVisible=true;
				axios.get("/activity/goods/"+this.dataForm.id).then(resp=>{
					this.dataForm.aglist=resp.data;
				})
			},
		},
		created() {

		},
		mounted() {
			this.list();
		}
	}
</script>

<style>
</style>
